<template>
  <div class="rank-button-container">
    <div
      class="rank-author-button"
      :class="{ isActive: listType === 0 }"
      @click="onChangeTab(0)"
    ></div>
    <div
      class="rank-team-button"
      :class="{ isActive: listType === 1 }"
      @click="onChangeTab(1)"
    ></div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { emitter } from './HomeSearch.vue';
export default {
  setup() {
    const state = reactive({
      listType: 0,
    });
    const refState = toRefs(state);
    const onChangeTab = (type) => {
      state.listType = type;
      emitter.emit('on-tab-change',state.listType);
    };
    return {
      ...refState,
      onChangeTab,
    };
  },
};
</script>

<style lang="less" scoped>
.rank-button-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
  flex-flow: row nowrap;
  & > div {
    z-index: 3;
    cursor: pointer;
  }
  .rank-author-button {
    .not-active;
    background-image: url();
    background-size: cover;
    &.isActive {
      .active;
      background-image: url('../assets/btn_author_active.png');
    }
  }
  .not-active {
    width: 158px;
    height: 39.5px;
  }
  .active {
    width: 172.5px;
    height: 43px;
  }
  .rank-team-button {
    background-image: url();
    background-size: cover;
    .not-active;
    &.isActive {
      .active;
      background-image: url('../assets/btn_team_active.png');
    }
  }
}
@media only screen and (min-width: 960px) {
  .rank-button-container {
    .button {
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .active {
      width: 480px;
      height: 77px;
    }
    .not-active {
      width: 450.5px;
      height: 72px;
    }
    .rank-author-button {
      .not-active;
      background-image: url("../assets/btn_author.png");
      &.isActive {
        .active;
        background-image: url('../assets/btn_author_web_active.png');
      }
      .button;
    }
    .rank-team-button {
      .not-active;
      width: 450.5px;
      height: 72px;
      background-image: url("../assets/btn_team.png");
      &.isActive {
        .active;
        background-image: url('../assets/btn_team_web_active.png');
      }
      .button;
    }
  }
}
</style>